<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>watch</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
  <div id="app">

    <div>
      <p>搜索框</p>
      <!-- 因为要监听输入框内容变化使用v-model -->
      <input v-model="search" type="text">
      <!-- <li v-for="(p,index)  in filterPersons" :key="p.id">{{p.name}}---{{p.age}}</li> -->
      <li v-for="(p,index)  in computedResult" :key="p.id">{{p.name}}---{{p.age}}</li>
    </div>

  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false;
  const vm = new Vue({
    el: "#app",
    data() {
      return {
        search: "",
        persons: [
          { id: '001', name: '马冬梅', age: 19, gender: '女' },
          { id: '002', name: '周冬雨', age: 20, gender: '女' },
          { id: '003', name: '周杰伦', age: 21, gender: '男' },
          { id: '004', name: '帅邓伦', age: 22, gender: '男' },
        ],
        filterPersons: []
      }
    },
    /* 因为要监听输入框内容变化引起数组属性的变化 所以用watch */
    //  #region 
    watch: {
      // { [key: string]: string | Function | Object | Array }
      //1在watch事件中要过滤数组
      // search: {
              // 要过滤数组
      //         //输入框还是" " 就执行函数 
      //         // 在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：
      //         immediate: true,
      //         handler(now, bef) {
      //           // console.log(now);
      //           //当监听的属性变化 这个函数就会执行
      //           //函数的参数 a 是最新的值 b 是之前的值
      //           //this.persons.filter是非变革方法  返回了一个新的数组 vue不会检测到 所以没反应
      //           //让原数组等于被过滤返回的数组 但是 这样不会 修改了 原数据
      //           //优化 定义一个新数组来接受过滤的数据
      //           this.filterPersons = this.persons.filter((item) => {
      //             //过滤要返回 我要过滤的东西
      //             // console.log(item.name.includes(now),"11");
      //             console.log(item.name.includes(this.search), "11");
      //             //过滤的条件
      //             return item.name.includes(this.search)
      //           })

      //         }
      //       } 

      //简写方式
      // search(value) {
      //   this.filterPersons = this.persons.filter((item) => {
      //     //过滤要返回 我要过滤的东西
      //     // console.log(item.name.includes(now),"11");
      //     console.log(item.name.includes(this.search), "11");
      //     //过滤的条件
      //     return item.name.includes(this.search)
      //   })
      // }
    },
    ////#endregion
    //computed 计算属性方法
    computed: {
      //当计算属性被读取的时候就会调用get方法
      //如果只要get方法 可以直接简写
      computedResult() {
        return this.filterPersons = this.persons.filter((item) => {
          return item.name.includes(this.search)
        })
      }

    }
  })
</script>

</html>